{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试平台</title>
    <link rel="stylesheet" type="text/css" href="{% static 'jquery/css/normalize.css' %}"/><!--CSS RESET-->
    <link rel="stylesheet" type="text/css" href="{% static 'jquery/css/htmleaf-demo.css' %} "><!--演示页面样式，使用时可以不引用-->
    <!--awesome font include-->
    <link type="text/css" rel="stylesheet" href="{% static 'jquery//assets/css/font-awesome.min.css' %}"/>
    <!--include plugin css-->
    <link type="text/css" rel="stylesheet" href="{% static 'jquery/src/jquery-rvnm.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">
    <script type="text/javascript" src="{% static 'jquery/js/jquery-1.11.0.min.js' %}"></script>


     <style>
      .chamfer{
          background: linear-gradient(41deg, transparent 10px, #66defd 0) top left,
                  linear-gradient(-90deg, transparent 0px, #adfdee 0) top right,
                  linear-gradient(-90deg, transparent 0px, #cbffbd 0) bottom right,
                  linear-gradient(45deg, transparent 21px, #b0fde2 0) bottom left;
          background-size: 49% 48%;
          background-repeat: no-repeat;

      }
</style>

</head>
<body>

{#<div style="background: #317a91;text-align: center;#}
{#border-radius: 5px;box-shadow: 4px 4px 10px #535353;margin: 0px">#}
{#    <h1 style="color: #fff9f4">欢迎来到接口测试首页</h1>#}
{#</div>#}


{#侧边栏#}
<nav id="navbar" class="">
    {#    顶部个人信息#}
    <div style="text-align:center;color: white;margin-left: 5px;margin-bottom: 5px;margin-top: 5px;">
        欢迎您：<span>{{ username }}</span> &nbsp;<a href="{% url 'logout' %}">
        <button style="float:right;background: #353c48;color: white;">
            退出
        </button>
    </a>
        <br>
        <img src="/static/user_img/{{ userimg }}" style="width: 50%" class="img-circle img-thumbnail" alt="">
        <a href="javascript:show_upload()" class="glyphicon glyphicon-pencil"></a>
    </div>
    {#    上传#}
    <form style="display: none" id="upload_file" action="/user_upload/" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="fileUpload"
               style="margin-left: 45px;width: 65px;height: 20px;font-size: xx-small;float: left"/>
        <button onclick="upload_py()" style="color: black;width: 64px;height: 21px;font-size: xx-small"> 上传头像</button>
    </form>


    <ul>
        <li>
            <a href="/project_list/">
                项目列表
            </a>
        </li>

        <li>
            <a href="/gateway/">
                项目传送门
            </a>
        </li>
        <li>
            <a href="/tools/">
                小工具集
            </a>
        </li>
        <li>
            <a href="/help/">
                帮助
            </a>
        </li>
        <li>
            <a href="/admin/" target="_blank">
                后台
            </a>
        </li>


    </ul>

</nav>

<script>
    function show_upload() {
        $("#upload_file").show();
    }
</script>


{#侧边栏显示隐藏按钮#}

<button id="menu_btn" onclick="display_menu()" style="
position: absolute;left: 188px;top: 48%;z-index: 999;height: 35px;
background-color: #353c48;color: white;border: 0;font-size: x-large"><
</button>
<script>
    function display_menu() {
        menu = document.getElementById('navbar');
        btn = document.getElementById("menu_btn");
        if (btn.innerText == "<") {
            menu.style.display = 'none';
            btn.style.left = '0px';
            btn.innerText = '>';
        } else {
            menu.style.display = 'block';
            btn.style.left = '188px';
            btn.innerText = '<';
        }

        //   $("#navbar").hide();
        {#$("#menu_btn").css({"margin-left":'0px'}).text("显示")#}


    }

</script>




<script src="{% static 'jquery/js/jquery-1.11.0.min.js' %}" type="text/javascript"></script>
<script type="text/javascript" src="{% static 'jquery/src/jquery-rvnm.js' %}"></script>
<script type="text/javascript">
    $(function () {
        var rvnMenu = $("#navbar").rvnm({
//                    mode: 'mobile',
//                    responsive: false,
            searchable: false,
            theme: 'dark-lesb'
        });
        console.log(rvnMenu);
//                rvnMenu.setMode('minimal');
        rvnMenu.setTheme('dark-ruby');
    });

</script>


<div id="page1"></div>

<script>
    $("#page1").load("/child/" + '{{ whichHTML }}/{{ oid }}/{{ ooid }}/')

</script>


{# 控制welcome 侧边栏是否打开页面就直接显示#}
<script>

{#    if ("{{ whichHTML }}" != 'home.html' && "{{ whichHTML }}" != 'gateway.html' &&"{{ whichHTML }}" != 'tools.html') {#}
{#        document.getElementById("menu_btn").click();#}
{#    }#}

    if ("{{ whichHTML }}" == 'tools.html' || "{{ whichHTML }}" == 'gateway.html' || "{{ whichHTML }}" == 'json.html') {
        document.getElementById("menu_btn").click();
    }

</script>

<script>
    document.getElementById("menu_btn").click();
</script>



<div class="chamfer" style="height: 30px;width: 100px;position: fixed;right: 0px;top: 0px ">
    <strong>
        <a href="/home/" style="font-size: large;padding-left: 30px;color: #00372e;text-decoration: none"> HOME </a>
    </strong>
</div>

</body>
</html>